<template>
	<view :style="'display: ' + showDisplay">
		<view @click="clickOther" class="qizai9527-comment-other"></view>
		<view class="qizai9527-comment" :style="'bottom:' + keyboardHeight + 'px'">
			<view class="qizai9527-comment-info">
				<textarea
					v-model="value"
					:placeholder="placeholder"
					:focus="isFocus"
					auto-height="true"
					maxlength="200"
					@input="textChange"
					adjustPosition
					fixed
					@keyboardheightchange="keyboardheightChange"
				/>
				<view @click.stop="submitComment" class="qizai9527-comment-submit">
					<image style="margin-left: 20rpx; width: 64rpx; height: 64rpx" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/send_comment_btn.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	props: {
		placeholder: {
			type: String,
			default: '友善是交流的起点'
		},
		isShow: {
			type: Boolean,
			default: false
		},
		valueData: {
			type: Array,
			default: []
		},
		curKey: {
			type: String,
			default: ''
		}
	},
	components: {},
	data() {
		return {
			screenHeight: 0,
			submitColor: '#b0b0b0',
			value: '',
			keyboardHeight: 0,
			showDisplay: 'none',
			isFocus: false
		};
	},
	methods: {
		textChange(e) {
			if (e.detail.value.length > 200) {
				this.value = e.detail.value.slice(0, 200);
				return;
			}
		},
		inputValue(e) {
			if (this.value) {
				this.submitColor = '#fb5f5f';
			} else {
				this.submitColor = '#b0b0b0';
			}
		},
		keyboardheightChange(e) {
			this.keyboardHeight = e.detail.height;
		},
		submitComment() {
			if (!this.value) return;
			this.$emit('submitComment', this.value);
		},
		clickOther() {
			this.$emit('clickOther', this.value);
		}
	},
	watch: {
		value: function(val, oldVal) {
			this.inputValue(val);
		},
		isShow: function(val, oldVal) {
			this.value = this.valueData.hasOwnProperty(this.curKey) ? this.valueData[this.curKey] : '';
			this.showDisplay = val ? 'block' : 'none';
			setTimeout(() => {
				this.isFocus = val;
			}, 100);
		},
		valueData: function(val, oldVal) {
		}
	}
};
</script>
<style>
.qizai9527-comment-other {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.qizai9527-comment {
	font-size: 28rpx;
	z-index: 999;
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: white;
	padding-left: 30rpx;
	padding-right: 30rpx;
	/* padding-top: 16rpx; */
	/* padding-bottom: 16rpx; */
	height: calc(108rpx + env(safe-area-inset-bottom));
}
.qizai9527-comment-info {
	position: relative;
	margin-top: 20rpx;
	/* height: calc(108rpx + env(safe-area-inset-bottom)); */
}
.qizai9527-comment-info textarea {
	width: calc(100% - 144rpx);
	display: inline-block;
	background-color: #f5f5f5;
	padding-left: 20rpx;
	padding-right: 20rpx;
	padding-top: 18rpx;
	padding-bottom: 18rpx;
	border-radius: 12rpx;
}
.qizai9527-comment-submit {
	position: absolute;
	bottom: 0;
	width: 84rpx;
	height: 100%;
	left: calc(100% - 124rpx);
}
</style>
